<template>
    <div class="billingMethods" v-loading="isLoading">
        <cardComponent pageTitle="查询服务类-->账单寄送方式查询">
            <template slot="cardBody">
                <!-- 账单寄送方式查询 -->
                <div class="dialogVisible">
                    <el-form
                        ref="searchFormOne"
                        :model="formData"
                        :inline="true"
                        label-position="right"
                        size="small"
                        label-width="180px"
                    >
                        <el-row>
                            <el-col :span="11" :offset="1">
                                <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                                    <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item
                                    label="账单寄送方式:"
                                    class="text_fl"
                                    label-position="left"
                                    prop="sistmcd"
                                >
                                    <el-select
                                        placeholder="请选择"
                                        v-model="sistmcd"
                                        @change="changetp"
                                        clearable
                                    >
                                        <el-option
                                            v-for="(item, index) in stmtypeList"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.code"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11" :offset="1" v-if="formData.STMCODE=='LT'">
                                <el-form-item
                                    label="账单寄送地址:"
                                    class="text_fl"
                                    label-position="left"
                                    prop="mainCardNo"
                                >
                                    <span
                                        class="el-form-item-span"
                                    >{{formData.ADDTYPE|getaddtype(addtypeList)}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="1" v-if="formData.STMCODE=='EM'">
                                <el-form-item
                                    label="账单寄送地址:"
                                    class="text_fl"
                                    label-position="left"
                                    prop="mainCardNo"
                                >
                                    <span class="el-form-item-span">{{billmethods}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- <el-form-item
                            v-show="isShowView"
                            label="交易结果:"
                            label-position="left"
                            prop="TRANSTATUS"
                        >
                            <span style="color:red;">{{ formData.TRANSTATUS }}</span>
                        </el-form-item>-->
                    </el-form>
                </div>
                <!-- 话术 -->
                <div class="hstable_wrap" v-if="speechList.length!=0">
                    <el-table
                        :data="speechList"
                        border
                        stripe
                        header-row-class-name="headerRow"
                        ref="showListTable"
                        class="heard-bg business_table hstable"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                        <el-table-column label="业务话术">
                            <template slot-scope="scope">{{scope.row.content}}</template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="footer">
                    <el-button type="primary" size="small" @click="handleApp">修 改</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="updatehistory"
                        v-show="isShowView"
                    >修改记录查询</el-button>
                    <!-- <el-button type="primary" size="small" @click="handleClose">关闭</el-button> -->
                </div>
                <el-dialog
                    v-drag
                    title="账单寄送方式修改"
                    :visible.sync="centerDialogVisible"
                    width="500px"
                    :append-to-body="true"
                    top="30vh"
                    :close-on-click-modal="false"
                    center
                >
                    <p>
                        当前账单寄送方式:
                        <span>{{this.curstmtype| getMethodTxt(stmtypeList)}}</span>
                    </p>
                    <p>
                        修改后账单寄送方式:
                        <span>{{this.sistmcd | getMethodTxt(stmtypeList)}}</span>
                    </p>

                    <p class="text_center padding_top15">
                        <span style="color:#3a8ee6; ">是否确认修改？</span>
                    </p>

                    <span slot="footer" class="dialog-footer">
                        <el-button
                            size="small"
                            icon="el-icon-circle-close"
                            @click="centerDialogVisible = false"
                        >取 消</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="updateBillMthod"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </span>
                </el-dialog>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { getAccountTypeName, getDictSelectList, getBusinessMenuId } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { BILLINGMETHOD } from '@/utils/Contants';

export default {
    name: 'BillingMethod',
    components: {
        cardComponent,
    },
    data() {
        return {
            formData: { sistmcd: '', TRANSTATUS: '' },
            rules: {
                sistmcd: [{ required: true, message: '请选择新账单寄送方式！' }],
            },
            // 原账单地址
            billmethods: '',
            dialogVisible: false,
            isLoading: false,
            accountType: '', // 账户类别
            stmtypeList: [],//账单寄送方式
            isShowView: false,
            addtypeList: [],//账单地址类型

            centerDialogVisible: false,
            curstmtype: '',//当前账单寄送方式
            sistmcd: '',
            speechList: [],//话术列表
            selectedList: [],
            MenuId: '',
        };
    },
    filters: {
        getMethodTxt(val, stmtypeList) {
            if (val === undefined || val === '') {
                return '无任何账单寄送方式';
            }
            const txt = val.trim();
            let text = '';
            stmtypeList.forEach((item) => {
                if (item.code === txt) {
                    text = item.label;
                }
            });
            return text;
        },
        getaddtype(val, addtypeList) {

            const txt = val.trim();
            let text = '';
            addtypeList.forEach((item) => {
                if (item.code === txt) {
                    text = item.label;
                }
            });
            return text;
        },
    },
    async mounted() {
        this.MenuId = this.$route.params.id || '';
        this.stmtypeList = await getDictSelectList('STMCD', this);
        this.addtypeList = await getDictSelectList('STSMAIL', this);
        // 获取账单信息
        this.getBillInfo();
        // 获取原账单寄送方式
        this.getBillMethod();
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
        await this.getspeechList();
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
        businessMenu: state => state.menu.businessMenu,
    }),
    methods: {
        dialogTable(visible) {
            this.dialogVisible = visible;
        },
        // 获取账单信息
        getBillInfo() {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: '0', // 是否检查密码标志
                PIN: '123456', // 密码
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3014';
            defaultParams.body.appBody = appBody;
            // 3014交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result.body.appBody, 222);
                    if (result.sysHead.rspCd === '000000') {
                        this.formData = result.body.appBody || [];
                        this.sistmcd = result.body.appBody.STMCODE;
                        this.curstmtype = result.body.appBody.STMCODE;
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        changetp() {
            this.formData.STMCODE = this.sistmcd;
        },
        getBillMethod() {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPTION: 1, // 1:查询 2：修改 3：按位图修改 4：新增（仅北京银行）按手机号码方式查询时，只能查询不能修改，也不能按位图修改
                INQOPT: 1, // 查询方式 // 1-按卡号查询 2-按张建查询 3-按手机号码查询             //业务报文
                PINFLAG: '0', // 是否检查密码标志
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3002';
            defaultParams.body.appBody = appBody;
            // 3002交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.billmethods = result.body.appBody.EMAIL || [];
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            console.log("this.MenuId", this.MenuId);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        handleApp() {
            if (this.sistmcd === '' || this.sistmcd === 'NO') {
                this.$alert('请选择账单寄送方式！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            if (this.selectedList.length != this.speechList.length) {
                this.$alert('话术尚未全部勾选！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            // this.isShowView = true;
            // this.formData.TRANSTATUS = '交易成功';
            console.log("this.formData.sistmcd", this.formData.sistmcd);


            this.centerDialogVisible = true;
        },
        updateBillMthod() {
            this.centerDialogVisible = false;
            let servcode = '';

            if (this.sistmcd === 'EM') {
                servcode = '91999900000000000000';
            } else if (this.sistmcd === 'LT') {
                servcode = '90999900000000000000';
            }
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                SERCNT: servcode, // 1:查询 2：修改 3：按位图修改 4：新增（仅北京银行）按手机号码方式查询时，只能查询不能修改，也不能按位图修改
                STSCHK: 'N', // 查询方式 // 1-按卡号查询 2-按张建查询 3-按手机号码查询             //业务报文
                PINFLAG: '0', // 是否检查密码标志
                PIN: '',
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4012';
            defaultParams.body.appBody = appBody;
            // 3002交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isShowView = true;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.curstmtype = this.sistmcd;
                        this.$alert('修改成功！', '提示', {
                            customClass: 'success', type: 'success',
                        });

                        this.formData.TRANSTATUS = '修改成功';
                        this.get3014();
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                        this.formData.TRANSTATUS = '修改失败，' + result.sysHead.rspMsg;
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                    this.formData.TRANSTATUS = '修改失败，后台报错';
                }
            });

        },
        async get3014() {
            const defaultParamInfos = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParamInfos.body.appHead.tranCode = '3014';// 修改交易号
            defaultParamInfos.body.appBody = {
                PINFLAG: '0',
                //PIN: '',
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                //OPTION: '1', // 1:查询 2：修改 3：按位图修改 4：新增（仅北京银行）按手机号码方式查询时，只能查询不能修改，也不能按位图修改
                //INQOPT: 1, // 查询方式 // 1-按卡号查询 2-按张建查询 3-按手机号码查询             //业务报文
            }
            await this.$post.common.transPort(defaultParamInfos).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '3014信用卡账户查询');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        // 更新 vuex 缓存 卡账户信息
                        // this.cardAccountInfos_3001 =  cardlossofs.body.appBody;
                        let data = cardlossofs.body.appBody;
                        this.$store.commit('common/UPDATE_CREDIT_CARD_SERVICE', data);
                    }
                }
            });
        },
        updatehistory() {
            this.MenuId = getBusinessMenuId('/businessSystem/accountCardDetaileQuery', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'accountCardDetaileQuery', path: '/businessSystem/accountCardDetaileQuery', params: { id: this.MenuId } });
        },
    },
};
</script>

<style lang='scss'>
.billingMethods {
    width: 98%;
    height: 100%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }

        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    //主体内容
    .billingMethodsMain {
        width: 100%;
        .el-row {
            .el-form-item__content {
                margin-left: 10px;
                text-align: left;
            }
        }
        .el-form-item__label {
            color: #999;
        }
        .mainRight {
            color: #111;
        }
    }
    .dialogVisible {
        margin-top: 20px;
    }
    .footer {
        text-align: center;
        margin-top: 30px;
    }
}
</style>
